<template>
  <div class="error-practice-page">
    <!-- 练习组件 -->
    <PracticeExerciseList
      v-if="currentView === 'practice'"
      :exercises="practiceExercises"
      :practice-title="'错题复习练习'"
      :question-type="'错题复习'"
      :submitting="practiceSubmitting"
      @back-to-setup="handleBackToErrorList"
      @submit-practice="handlePracticeSubmit"
    />

    <!-- 练习结果展示 -->
    <PracticeResultDisplay
      v-if="currentView === 'result'"
      :exercises="practiceExercises"
      :correct-count="practiceCorrectCount"
      :practice-duration="practiceDuration"
      @start-new-practice="handleStartNewPractice"
      @review-incorrect="handleReviewIncorrect"
      @export-result="handleExportResult"
    />

    <!-- 错题列表 -->
    <div v-if="currentView === 'list'">
      <!-- 搜索筛选区域 -->
      <div class="search-section">
        <div class="search-form">
          <div class="search-input-group">
            <label class="search-label">题目名称</label>
            <a-input
              v-model:value="queryParams.title"
              placeholder="请输入要搜索的错题名称"
              class="search-input"
              @pressEnter="handleSearch"
            />
          </div>

          <div class="difficulty-group">
            <label class="search-label">题型标签</label>
            <div class="difficulty-tags">
              <a-tag
                v-for="type in questionTypes"
                :key="type.name"
                :color="type.active ? 'blue' : 'default'"
                @click="toggleQuestionType(type)"
                class="difficulty-tag"
              >
                {{ type.name }}
              </a-tag>
            </div>
          </div>

          <a-button type="primary" @click="handleSearch" class="search-btn">
            <template #icon><search-outlined /></template>
            搜索
          </a-button>

          <a-button
            type="primary"
            :disabled="selectedQuestions.length === 0"
            @click="startBatchPractice"
            class="batch-practice-btn"
          >
            <template #icon><thunderbolt-outlined /></template>
            批量复习 ({{ selectedQuestions.length }})
          </a-button>
        </div>
      </div>

      <!-- 错题列表 -->
      <div class="question-list">
        <a-table
          :columns="tableColumns"
          :data-source="errorQuestions"
          :loading="loading"
          :pagination="{
            current: queryParams.current,
            pageSize: queryParams.pageSize,
            total: total,
            showSizeChanger: true,
            showTotal: (total: number) => `共 ${total} 条错题`,
            pageSizeOptions: ['10', '20', '30'],
            onChange: handlePageChange,
            onShowSizeChange: handlePageSizeChange,
          }"
          :row-selection="{
            selectedRowKeys: selectedQuestions,
            onChange: handleSelectionChange,
            onSelectAll: handleSelectAll,
          }"
          :row-key="(record: any) => record.id"
          size="middle"
          class="question-table"
        >
          <!-- 自定义列渲染 -->
          <template #bodyCell="{ column, record }">
            <!-- 题号列 -->
            <template v-if="column.key === 'id'">
              <span class="question-id">{{ record.id }}</span>
            </template>

            <!-- 题目名称列 -->
            <template v-else-if="column.key === 'title'">
              <a @click="viewQuestionDetail(record)" class="question-name-link">
                {{ record.title }}
              </a>
            </template>

            <!-- 题型标签列 -->
            <template v-else-if="column.key === 'type'">
              <div class="question-tags">
                <a-tag :color="getQuestionTypeColor(record.type || '简单')" size="small">
                  {{ record.type || '简单' }}
                </a-tag>
              </div>
            </template>
            <!-- 题型标签列 -->
            <template v-else-if="column.key === 'knowledgePoints'">
              <div class="question-tags">
                <a-tag
                  v-for="(item, index) in record?.knowledgePoints"
                  :color="getKnowledgePointColor(item)"
                  size="small"
                >
                  {{ item }}
                </a-tag>
              </div>
            </template>
            <!-- 复习次数列 -->
            <template v-else-if="column.key === 'reviewCount'">
              <div class="review-count-cell">
                <span class="count-text">{{ record.reviewCount || 0 }} 次</span>
              </div>
            </template>

            <!-- 创建时间列 -->
            <template v-else-if="column.key === 'createTime'">
              <div class="time-cell">
                {{ formatDate(record.createTime) }}
              </div>
            </template>

            <!-- 操作列 -->
            <template v-else-if="column.key === 'actions'">
              <a-button
                type="primary"
                size="small"
                @click="viewQuestionDetail(record)"
                class="action-btn"
              >
                查看详情
              </a-button>
            </template>
          </template>
        </a-table>
      </div>
    </div>

    <!-- 题目详情模态框 -->
    <a-modal v-model:open="detailModalVisible" title="题目详情" width="800px" :footer="null">
      <div v-if="selectedQuestion" class="question-detail">
        <div class="detail-header">
          <h3>{{ selectedQuestion.title }}</h3>
          <a-tag :color="getDifficultyColor(selectedQuestion.type || '简单')">
            {{ selectedQuestion.type || '简单' }}
          </a-tag>
        </div>

        <div class="detail-content">
          <div class="question-text">
            <h4>题目内容：</h4>
            <div v-html="selectedQuestion.content" class="content-text"></div>
          </div>

          <div
            v-if="selectedQuestion.options && selectedQuestion.options.length > 0"
            class="question-options"
          >
            <h4>选项：</h4>
            <div class="options-list">
              <div
                v-for="(option, index) in selectedQuestion.options"
                :key="index"
                class="option-item"
              >
                <span class="option-label">{{ String.fromCharCode(65 + index) }}.</span>
                <span class="option-text">{{ option }}</span>
              </div>
            </div>
          </div>

          <div class="question-answers">
            <div class="answer-section">
              <h4>您的答案：</h4>
              <span class="user-answer">{{ selectedQuestion.userAns || '未作答' }}</span>
            </div>
            <div class="answer-section">
              <h4>正确答案：</h4>
              <span class="correct-answer">{{ selectedQuestion.answer }}</span>
            </div>
          </div>

          <div v-if="selectedQuestion.explanation" class="question-explanation">
            <h4>解析：</h4>
            <div v-html="selectedQuestion.explanation" class="explanation-text"></div>
          </div>

          <div class="question-meta">
            <div class="meta-item">
              <span class="meta-label">题型：</span>
              <span class="meta-value">{{ selectedQuestion.type }}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">复习次数：</span>
              <span class="meta-value">{{ selectedQuestion.reviewCount || 0 }} 次</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">添加时间：</span>
              <span class="meta-value">{{ formatDate(selectedQuestion.createTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, reactive } from 'vue'

import { message } from 'ant-design-vue'
import { ThunderboltOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { listErrorPracticeVoByPage } from '@/api/errorPracticeController'
import PracticeExerciseList from '@/components/student/practice/PracticeExerciseList.vue'
import PracticeResultDisplay from '@/components/student/practice/PracticeResultDisplay.vue'

// 表格列定义
const tableColumns = [
  {
    title: '题号',
    dataIndex: 'id',
    key: 'id',
    width: 120,
    ellipsis: true,
  },
  {
    title: '题目名称',
    dataIndex: 'title',
    key: 'title',
    width: 150,
  },
  {
    title: '题型',
    dataIndex: 'type',
    key: 'type',
    width: 150,
  },
  {
    title: '知识点',
    dataIndex: 'knowledgePoints',
    key: 'knowledgePoints',
    width: 350,
  },
  {
    title: '复习次数',
    dataIndex: 'reviewCount',
    key: 'reviewCount',
    width: 120,
    sorter: (a: any, b: any) => (a.reviewCount || 0) - (b.reviewCount || 0),
  },
  {
    title: '添加时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 160,
    sorter: (a: any, b: any) => new Date(a.createTime).getTime() - new Date(b.createTime).getTime(),
  },
  {
    title: '',
    key: 'actions',
    width: 100,
    fixed: 'right' as const,
  },
]

const total = ref(0)
const loading = ref(false)

// 选择相关
const selectAll = ref(false)
const selectedQuestions = ref<string[]>([])

// 模态框相关
const detailModalVisible = ref(false)
const selectedQuestion = ref<API.ErrorPracticeVO | null>(null)

// 练习相关状态
const currentView = ref<'list' | 'practice' | 'result'>('list')
const practiceExercises = ref<any[]>([])
const practiceSubmitting = ref(false)
const practiceStartTime = ref<Date | null>(null)
const practiceCorrectCount = ref(0)

const errorQuestions = ref<API.ErrorPracticeVO[]>([])

// 查询参数
const queryParams = reactive<API.ErrorPracticeQueryRequest>({
  current: 1,
  pageSize: 10,
})

// 题型标签
const questionTypes = ref([
  { name: '全部', active: true },
  { name: '选择题', active: false },
  { name: '填空题', active: false },
  { name: '判断题', active: false },
  { name: '程序题', active: false },
  { name: '简答题', active: false },
  { name: '综合题', active: false },
])

// 加载错题列表
const loadErrorPracticeList = async () => {
  try {
    loading.value = true
    // queryParams.type = getActiveTypes()
    const res = await listErrorPracticeVoByPage(queryParams)
    if (res.data.code === 0 && res.data.data) {
      errorQuestions.value = res.data.data.records || []
      total.value = Number(res.data.data.total) || 0
      selectedQuestions.value = []
      selectAll.value = false
    } else {
      message.error('获取错题列表失败')
    }
  } catch (error) {
    console.error('加载错题列表失败:', error)
    message.error('获取错题列表失败')
  } finally {
    loading.value = false
  }
}

// 切换题型标签（单选模式）
const toggleQuestionType = (type: any) => {
  // 先取消所有标签的选中状态
  questionTypes.value.forEach((t) => {
    t.active = false
  })

  // 选中当前点击的标签
  type.active = true

  // 更新查询参数
  if (type.name === '全部') {
    queryParams.type = '' // 清空类型筛选
  } else {
    queryParams.type = type.name // 设置具体类型
  }

  // 重新加载数据
  queryParams.current = 1 // 重置到第一页
  loadErrorPracticeList()
}

// 搜索功能
const handleSearch = () => {
  queryParams.current = 1 // 重置到第一页
  loadErrorPracticeList()
}

// 方法

const handleSelectAll = (e: any) => {
  if (e.target.checked) {
    selectedQuestions.value = errorQuestions.value.map((q) => String(q.id || ''))
    errorQuestions.value.forEach((q) => (q.selected = true))
  } else {
    selectedQuestions.value = []
    errorQuestions.value.forEach((q) => (q.selected = false))
  }
}

// 题型颜色映射（固定）
const getQuestionTypeColor = (type: string) => {
  switch (type) {
    case '选择题':
      return 'blue'
    case '填空题':
      return 'green'
    case '判断题':
      return 'orange'
    case '简答题':
      return 'purple'
    case '程序题':
      return 'cyan'
    case '计算题':
      return 'geekblue'
    case '应用题':
      return 'magenta'
    case '分析题':
      return 'volcano'
    default:
      return 'default'
  }
}

// 知识点颜色映射（动态生成）
const knowledgePointColors = [
  'magenta',
  'red',
  'volcano',
  'orange',
  'gold',
  'lime',
  'green',
  'cyan',
  'blue',
  'geekblue',
  'purple',
  'pink',
]

const getKnowledgePointColor = (knowledgePoint: string) => {
  if (!knowledgePoint) return 'default'

  // 使用字符串哈希生成稳定的颜色索引
  let hash = 0
  for (let i = 0; i < knowledgePoint.length; i++) {
    const char = knowledgePoint.charCodeAt(i)
    hash = (hash << 5) - hash + char
    hash = hash & hash // 转换为32位整数
  }

  // 确保索引为正数并在颜色数组范围内
  const colorIndex = Math.abs(hash) % knowledgePointColors.length
  return knowledgePointColors[colorIndex]
}

// 难度等级颜色映射
const getDifficultyColor = (difficulty: string) => {
  switch (difficulty) {
    case '简单':
    case 'easy':
      return 'green'
    case '中等':
    case '适中':
    case 'medium':
      return 'orange'
    case '困难':
    case 'hard':
      return 'red'
    default:
      return 'default'
  }
}

// 状态颜色映射
const getStatusColor = (status: string) => {
  switch (status) {
    case '已掌握':
    case 'mastered':
      return 'green'
    case '需复习':
    case 'review':
      return 'orange'
    case '错题':
    case 'error':
      return 'red'
    case '未练习':
    case 'unpracticed':
      return 'default'
    default:
      return 'blue'
  }
}

const viewQuestionDetail = (question: API.ErrorPracticeVO) => {
  selectedQuestion.value = question
  detailModalVisible.value = true
}

const startBatchPractice = () => {
  if (selectedQuestions.value.length === 0) {
    message.warning('请先选择要复习的题目')
    return
  }

  // 准备练习数据
  const selectedErrorPractices = errorQuestions.value.filter((item: API.ErrorPracticeVO) =>
    selectedQuestions.value.includes(item.id?.toString() || ''),
  )

  // 转换为练习组件需要的格式
  practiceExercises.value = selectedErrorPractices.map((item: API.ErrorPracticeVO) => ({
    id: item.id?.toString() || '',
    title: item.title || `错题练习 ${item.id}`,
    content: item.content || item.explanation || '请根据之前的错误重新作答',
    type: item.type || '错题复习',
    options: item.options || [], // 添加选项字段
    answer: item.answer || '',
    userAns: undefined,
    explanation: item.explanation || '',
  }))

  // 记录开始时间
  practiceStartTime.value = new Date()

  // 切换到练习视图
  currentView.value = 'practice'

  message.success(`开始复习 ${selectedQuestions.value.length} 道错题`)
}

// 练习相关事件处理
const handleBackToErrorList = () => {
  currentView.value = 'list'
  practiceExercises.value = []
  selectedQuestions.value = []
  selectAll.value = false
}

const handlePracticeSubmit = async (answers: Record<string, string>) => {
  practiceSubmitting.value = true
  try {
    // 更新用户答案
    practiceExercises.value.forEach((ex) => {
      ex.userAns = answers[ex.id] || ''
    })

    // 计算正确数量
    practiceCorrectCount.value = practiceExercises.value.filter(
      (ex) => ex.userAns === ex.answer,
    ).length

    // 切换到结果视图
    currentView.value = 'result'

    message.success('错题复习完成！')
  } catch (error) {
    console.error('提交练习失败:', error)
    message.error('提交失败，请重试')
  } finally {
    practiceSubmitting.value = false
  }
}

const handleStartNewPractice = () => {
  currentView.value = 'list'
  practiceExercises.value = []
  selectedQuestions.value = []
  selectAll.value = false
}

const handleReviewIncorrect = () => {
  // 筛选出错误的题目重新练习
  const incorrectExercises = practiceExercises.value.filter((ex) => ex.userAns !== ex.answer)
  if (incorrectExercises.length === 0) {
    message.info('没有错误的题目需要复习')
    return
  }

  practiceExercises.value = incorrectExercises
  currentView.value = 'practice'
  message.info(`开始复习 ${incorrectExercises.length} 道错题`)
}

const handleExportResult = () => {
  const resultData = {
    timestamp: new Date().toISOString(),
    practiceType: '错题复习',
    summary: {
      totalQuestions: practiceExercises.value.length,
      correctCount: practiceCorrectCount.value,
      correctRate: (practiceCorrectCount.value / practiceExercises.value.length) * 100,
      duration: practiceStartTime.value
        ? Math.round((new Date().getTime() - practiceStartTime.value.getTime()) / 60000)
        : 0,
    },
    details: practiceExercises.value.map((ex, index) => ({
      questionNumber: index + 1,
      title: ex.title,
      type: ex.type,
      userAnswer: ex.userAns || '未作答',
      correctAnswer: ex.answer,
      isCorrect: ex.userAns === ex.answer,
    })),
  }

  // 创建下载链接
  const dataStr = JSON.stringify(resultData, null, 2)
  const dataBlob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(dataBlob)
  const link = document.createElement('a')
  link.href = url
  link.download = `错题复习结果_${new Date().toISOString().slice(0, 10)}.json`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)

  message.success('结果导出成功')
}

// 计算练习耗时
const practiceDuration = computed(() => {
  if (!practiceStartTime.value) return 0
  return Math.round((new Date().getTime() - practiceStartTime.value.getTime()) / 60000)
})

// 表格事件处理
const handleSelectionChange = (selectedRowKeys: string[]) => {
  selectedQuestions.value = selectedRowKeys
  // 同步更新 errorQuestions 中的 selected 状态
  errorQuestions.value.forEach((q) => {
    q.selected = selectedRowKeys.includes(String(q.id || ''))
  })
}

const handlePageChange = (current: number, pageSize: number) => {
  queryParams.current = current
  queryParams.pageSize = pageSize
  loadErrorPracticeList()
}

const handlePageSizeChange = (_current: number, pageSize: number) => {
  queryParams.current = 1 // 重置到第一页
  queryParams.pageSize = pageSize
  loadErrorPracticeList()
}

// 格式化日期
const formatDate = (dateString: string | undefined) => {
  if (!dateString) return '未知'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

onMounted(() => {
  // 页面加载时加载错题列表
  loadErrorPracticeList()
})
</script>

<style>
/* 全局样式优化 - 智能滚动条控制 */
.ant-layout-content {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
</style>

<style scoped>
.error-practice-page {
  max-width: 1500px; /* 限制最大宽度 */
  width: 100%;
  min-height: calc(100vh - 85px - 48px); /* 最小高度，允许内容超出时自动扩展 */
  margin: 0 auto; /* 水平居中 */
  padding: 16px 32px; /* 增加左右padding */
  background: #f5f5f5;
  overflow: visible; /* 允许内容自然展开 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 搜索区域 */
.search-section {
  margin-top: 15px;
  background: white;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8e8e8;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.search-input-group,
.difficulty-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-label {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  white-space: nowrap;
  min-width: 70px;
}

.search-input {
  width: 320px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  transition: all 0.2s ease;
  height: 40px;
  font-size: 14px;
}

.search-input:hover {
  border-color: #40a9ff;
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.1);
}

.search-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.difficulty-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.difficulty-tag {
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid #d9d9d9;
  user-select: none;
}

.difficulty-tag:hover {
  border-color: #40a9ff;
  color: #40a9ff;
}

.search-btn {
  height: 40px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 0 20px;
}

.search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.batch-practice-btn {
  height: 40px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 0 20px;
  margin-left: auto;
}

.batch-practice-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

/* 题目列表 */
.question-list {
  background: white;
  border-radius: 0 0 12px 12px;
  padding: 20px 24px 24px 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8e8e8;
  border-top: none;
  flex: 1;
  min-height: 0;
}

.question-table :deep(.ant-table) {
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.question-table :deep(.ant-table-container) {
  overflow: visible; /* 让表格内容自然展开 */
}

.question-table :deep(.ant-table-content) {
  overflow: visible; /* 表格内容自然展开 */
}

.question-table :deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 600;
  color: #262626;
  padding: 16px 12px;
  font-size: 14px;
  height: 56px;
}

.question-table :deep(.ant-table-tbody > tr > td) {
  padding: 16px 12px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 14px;
  height: 64px;
}

.question-table :deep(.ant-table-tbody > tr:hover > td) {
  background: #f8f9fa;
}

.question-table :deep(.ant-table-tbody > tr:last-child > td) {
  border-bottom: none;
}

/* 分页样式 */
.question-table :deep(.ant-pagination) {
  margin-top: 20px;
  text-align: center; /* 居中显示 */
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
}

.question-table :deep(.ant-pagination-item) {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  transition: all 0.2s ease;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 0 4px; /* 左右间距 */
}

.question-table :deep(.ant-pagination-item:hover) {
  border-color: #1890ff;
  color: #1890ff;
}

.question-table :deep(.ant-pagination-item-active) {
  background: #1890ff;
  border-color: #1890ff;
  color: white;
  font-weight: 500;
}

.question-table :deep(.ant-pagination-prev),
.question-table :deep(.ant-pagination-next) {
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  transition: all 0.2s ease;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 0 4px; /* 左右间距 */
}

.question-table :deep(.ant-pagination-prev:hover),
.question-table :deep(.ant-pagination-next:hover) {
  border-color: #1890ff;
  color: #1890ff;
}

.question-table :deep(.ant-pagination-total-text) {
  color: #666;
  font-size: 14px;
  margin-right: 20px;
}

/* 自定义列样式 */
.question-id {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.question-name-link {
  color: #1890ff;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.question-name-link:hover {
  color: #40a9ff;
  text-decoration: underline;
}

.question-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.review-count-cell {
  text-align: center;
  color: #666;
  font-size: 14px;
}

.count-text {
  font-weight: 500;
}

.time-cell {
  color: #666;
  font-size: 13px;
  text-align: center;
}

.action-btn {
  border-radius: 4px;
  font-size: 13px;
  height: 28px;
  padding: 0 12px;
  transition: all 0.2s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.3);
}

.error-table :deep(.ant-table-tbody > tr:hover > td) {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
}

.error-table :deep(.ant-table-tbody > tr:last-child > td) {
  border-bottom: none;
}

.error-table :deep(.ant-pagination) {
  margin: 24px 0 8px 0;
  text-align: center;
}

.error-table :deep(.ant-pagination-item) {
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  transition: all 0.3s ease;
}

.error-table :deep(.ant-pagination-item:hover) {
  border-color: #40a9ff;
  transform: translateY(-1px);
}

.error-table :deep(.ant-pagination-item-active) {
  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
  border-color: #1890ff;
}

.title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-text {
  font-weight: 500;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.title-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #999;
}

.create-time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-wrapper :deep(.ant-pagination-total-text) {
  color: #666;
  font-size: 12px;
  margin-right: 12px;
}

/* 题目详情模态框样式 */
.question-detail {
  padding: 8px 0;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.detail-content h4 {
  color: #333;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  margin-top: 20px;
}

.detail-content h4:first-child {
  margin-top: 0;
}

.content-text,
.explanation-text {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
  line-height: 1.6;
  color: #333;
}

.question-options {
  margin: 20px 0;
}

.options-list {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #52c41a;
}

.option-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  line-height: 1.6;
}

.option-item:last-child {
  margin-bottom: 0;
}

.option-label {
  font-weight: 600;
  color: #1890ff;
  margin-right: 8px;
  min-width: 24px;
}

.option-text {
  color: #333;
  flex: 1;
}

.question-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.answer-section {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #faad14;
}

.answer-section h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.user-answer,
.correct-answer {
  font-weight: 600;
  color: #333;
}

.question-meta {
  background: #fafafa;
  padding: 16px;
  border-radius: 8px;
  margin-top: 20px;
}

.meta-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.meta-item:last-child {
  margin-bottom: 0;
}

.meta-label {
  color: #666;
  font-size: 14px;
}

.meta-value {
  color: #333;
  font-weight: 500;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .error-practice-page {
    max-width: 1200px;
    padding: 24px 32px;
  }
}

@media (max-width: 1200px) {
  .error-practice-page {
    max-width: 1000px;
    padding: 20px 24px;
  }

  .header-columns,
  .question-content {
    grid-template-columns: 2fr 60px 80px 80px 80px 80px 100px;
    gap: 12px;
  }

  .page-header,
  .filter-section,
  .question-list {
    padding: 24px 28px;
  }
}

@media (max-width: 992px) {
  .error-practice-page {
    max-width: 100%;
    padding: 16px 20px;
  }

  .page-header,
  .filter-section,
  .question-list {
    padding: 20px 24px;
    margin-bottom: 24px;
  }
}

@media (max-width: 768px) {
  .error-practice-page {
    padding: 16px;
    max-width: 100%;
  }

  .page-header,
  .filter-section,
  .question-list {
    padding: 16px 20px;
    margin-bottom: 20px;
    border-radius: 12px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .filter-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .header-columns,
  .question-content {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .question-item {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 12px;
  }

  .question-answers {
    grid-template-columns: 1fr;
  }

  .pagination-wrapper {
    padding: 12px 0 0 0;
    margin: 12px 0 0 0;
  }
}

@media (max-width: 480px) {
  .error-practice-page {
    padding: 12px;
  }

  .page-header,
  .filter-section,
  .question-list {
    padding: 12px 16px;
    margin-bottom: 16px;
  }

  .pagination-wrapper {
    padding: 8px 0 0 0;
    margin: 8px 0 0 0;
  }
}
</style>
